<template>
  <el-card class="box-card card-chart h-100 d-flex flex-column" :body-style="{flex: 1}">
    <div slot="header" class="clearfix d-flex">
      <span class="header-index">1</span>
      <span class="col header-title">调查经费落实</span>
      <el-button type="text" class="mr-3" @click="$router.push({name: routerName})">查看详情</el-button>
    </div>
    <div class="wd-card-body" style="padding: 0;">
      <div ref="echarts" class="h-100 w-100"></div>
    </div>
  </el-card>
</template>
<script>
import interval from "./interval";

export default {
  name: "FundsoutlayCharts",
  title: "调查经费落实",
  mixins: [interval],
  data() {
    return {
      url: "survey/report/statisticsSurveyOutlayImplement"
    };
  },
  props: {
    routerName: {
      type: String
    }
  },
  methods: {
    setData(datas) {
      let xKeys = Object.keys(datas)
      let successArr= []
      let errorArr= []
      xKeys.forEach(key => {
        successArr.push(datas[key][0])
        errorArr.push(datas[key][1])
      })
      this.setOption(xKeys, successArr, errorArr);
    },
    setOption(xKeys, successArr, errorArr) {
      this.chart.setOption({
        color: ["#3AA1FF", "#4EC973"],
        tooltip: {
          trigger: "axis",
          axisPointer: {
            // 坐标轴指示器，坐标轴触发有效
            type: "shadow" // 默认为直线，可选为：'line' | 'shadow'
          }
        },
        legend: {
          data: ["未落实区县(个)", "已落实区县(个)"],
          top: 15,
          itemWidth: 15,
          itemHeight: 15,
          selectedMode:false,//取消图例上点击事件
        },
        grid: {
          left: "3%",
          right: "4%",
          bottom: "3%",
          containLabel: true
        },
        yAxis: {
          type: "value"
        },
        xAxis: {
          type: "category",
          data: xKeys
        },
        series: [
          {
            name: "未落实区县(个)",
            type: "bar",
            stack: "总量",
            barCategoryGap: "65%",
            label: {
              normal: {
                show: true,
                formatter: (item) => {
                  if (item.value) {
                    return item.value
                  } else {
                    return ''
                  }
                }
              }
            },
            data: errorArr
          },
          {
            name: "已落实区县(个)",
            type: "bar",
            stack: "总量",
            barCategoryGap: "65%",
            label: {
              normal: {
                show: true,
                formatter: (item) => {
                  if (item.value) {
                    return item.value
                  } else {
                    return ''
                  }
                }
              }
            },
            data: successArr
          }
        ]
      });
    }
  }
};
</script>
